<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
//定义基础路径
String path = request.getContextPath()+"/";
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
String resourcesPath = path + "resources/";
String omPath = resourcesPath + "operamasks-ui-2.0/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="<%=omPath%>css/default/om-default.css" rel="stylesheet" type="text/css" />
<script src="<%=omPath%>js/jquery.min.js" type="text/javascript"></script>
<script src="<%=omPath%>js/operamasks-ui.min.js" type="text/javascript"></script>
<script src="<%=omPath%>development-bundle/ui/om-grid.js" type="text/javascript"></script>
<script src="<%=omPath%>development-bundle/ui/om-grid-sort.js" type="text/javascript"></script>
<style type="text/css">
       .color_red { color: red; }
	.search-button{
	padding-left: 30px;
	padding-top: 9px;
	}
	
   	.myinput input{
    border:1px solid;
    border-color:lightblue;
    height: 18px;
    width : 160px;
   	}
   	.myinput input:focus{border: 1px solid #3A76C2;}
   	input.error{border: 1px solid red;}
 	.mytable td{
   	padding-top: 5px;
   	}
   .mytable .mytable-left{
   text-align: right;
   width : 100px;
   }
  .mytable .mytable-right{
   width : 150px;
   }
       
    </style>
<script type="text/javascript">
var path = "${pageContext.request.contextPath}" + "/";

var searchFiled = null;
var grid = null;
var dialogAdd = null;
var dialogEdit = null;
var dialogDelete = null;
var mainTool = null;
var validatorAdd = null;
var validatorEdit = null;

var searchUrl = path + "rm/filterQuery.html";
var addUrl = path + "rm/gridAdd.html";
var deleteUrl = path + "rm/gridDelete.html";
var editUrl = path + "rm/gridEdit.html";
var elmCodeUrl = path+"sm/omComboQuery.html?queryString=select chemicalId,chemicalId from SmTsChemical order by chemicalId";

$(function() {
	initVars();
	loadTool();
	initGrid();
	initDialog();
	//search();
});
function initVars(){
	searchFiled = $('#search-field');// 生成搜索字段
	grid = $('#maingrid'); // 生成表格
	dialogAdd = $("#dialog-Add");
	dialogDelete = $("#dialog-Delete");
	dialogEdit = $("#dialog-Edit");
	mainTool = $('#maintool'); 
}
function loadTool() {
	var buttons = [];
	buttons.push({
		separtor : true
	});	

	buttons.push({
		id : "add",
		label : "增加",
		onClick : function() {
			var rowData = {
				qualityBatch : $('#qualityBatch').val(),
			};
			showDialogAdd('新增', rowData);
		}
	});
	buttons.push({
		separtor : true
	});

	buttons.push({
		id : "delete",
		label : "删除",
		onClick : function() {
			var selections = grid.omGrid('getSelections', true);
			if (selections.length != 1) {
				$.omMessageBox.alert({
					content : '请选择一行记录',
				});
				return false;
			}
			showDialogDelete('删除', selections[0]);
		}
	});
	buttons.push({
		separtor : true
	});

	buttons.push({
		id : "edit",
		label : "修改",
		onClick : function() {
			var selections = grid.omGrid('getSelections', true);
			if (selections.length != 1) {
				$.omMessageBox.alert({
					content : '请选择一行记录',
				});
				return false;
			}
			showDialogEdit('修改', selections[0]);
		}
	});
	buttons.push({
		separtor : true
	});

	// 加载工具栏
	mainTool.omButtonbar({
		btns : buttons
	});
}

//声明dialogAdd对话框
function initDialogAdd() {
	$('#qualItem',dialogAdd).omCombo({
		dataSource : elmCodeUrl,
		width : 163
	});
	$('#qualItemVal','#addForm').omNumberField({allowDecimals : true});
	var buttons = [
			{
				text : "增加",
				click : function() {
					if(!validatorAdd.form()){
						$(':input','#addForm').each(function(){
							if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
								$(this).omTooltip('show');
							}
						});
						return;
					}
					var info = {
							"domain" : "SmRmQualityElement",
							"SmRmQualityElement" : getSubmitData(dialogAdd)
					};
					$.post( addUrl,info, 
							function(data, textStatus)
							{
						     if( data.success )
								{
						    	 $.omMessageBox.alert( { type: "success", title:"成功", content: data.message } );
						    	 dialogAdd.omDialog("close");// 关闭收货对话框
								 grid.omGrid('reload');// 刷新表格数据
								 
								}
						     else
						    	 {
									$.omMessageBox.alert( { type: "error", title:"失败", content: data.message } );
						    	 }
					});
				}
			}, {
				text : "关闭",
				click : function() {
					$(':input','#addForm').each(function(){
						if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
							$(this).omTooltip('hide');
						}
					});
					dialogAdd.omDialog("close");// 关闭dialog
					grid.omGrid('reload');// 刷新表格数据
				}
			} ];
	dialogAdd.omDialog({
		width : 400,
		height : 250,
		autoOpen : false,
		modal : true,
		resizable : false,
		buttons : buttons,
		onClose : function(){
			$(':input','#addForm').each(function(){
				if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
					$(this).omTooltip('hide');
				}
			});
		}
	});

	// 显示dialog并初始化里面的输入框的数据
	showDialogAdd = function(title, rowData) {
		validatorAdd.resetForm();
		$('#addForm input').each(function(){
	    	$(this,showDialogAdd).val(rowData[this.name]);
		});
		dialogAdd.omDialog("option", "title", title);
		dialogAdd.omDialog("open");// 显示dialog
	};

};

// 声明dialogDelete对话框
function initDialogDelete() {
	
	var buttons = [
			{
				text : "删除",
				click : function() {
					var info = {
							"domain" : "SmRmQualityElement",
							"ids" : $('#id',deleteForm).val()
					};
					$.post( deleteUrl,info, 
							function(data, textStatus)
							{
						     if( data.success )
								{
						    	 $.omMessageBox.alert( { type: "success", title:"成功", content: data.message } );
						    	 dialogDelete.omDialog("close");// 关闭收货对话框
								 grid.omGrid('reload');// 刷新表格数据
								 
								}
						     else
						    	 {
									$.omMessageBox.alert( { type: "error", title:"失败", content: data.message } );
						    	 }
					});
				}
			}, {
				text : "关闭",
				click : function() {
					dialogDelete.omDialog("close");// 关闭dialog
					grid.omGrid('reload');// 刷新表格数据
				}
			} ];
	dialogDelete.omDialog({
		width : 400,
		height : 250,
		autoOpen : false,
		modal : true,
		resizable : false,
		buttons : buttons
	});
	// 显示dialog并初始化里面的输入框的数据
	showDialogDelete = function(title, rowData) {
		$('#deleteForm input').each(function(){
	    	$(this,showDialogDelete).val(rowData[this.name]);
		});
		dialogDelete.omDialog("option", "title", title);
		dialogDelete.omDialog("open");// 显示dialog
	};

};

// 声明dialogEdit对话框
function initDialogEdit() {
	$('#qualItemVal','#editForm').omNumberField({allowDecimals : true});
	var buttons = [
			{
				text : "修改",
				click : function() {
					if(!validatorEdit.form()){
						$(':input','#editForm').each(function(){
							if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
								$(this).omTooltip('show');
							}
						});
						return;
					}
					var info = {
							"domain" : "SmRmQualityElement",
							"SmRmQualityElement" : getSubmitData(dialogEdit)
					};
					$.post( editUrl,info, 
							function(data, textStatus)
							{
						     if( data.success )
								{
						    	 $.omMessageBox.alert( { type: "success", title:"成功", content: data.message } );
						    	 dialogEdit.omDialog("close");// 关闭收货对话框
								 grid.omGrid('reload');// 刷新表格数据
								 
								}
						     else
						    	 {
									$.omMessageBox.alert( { type: "error", title:"失败", content: data.message } );
						    	 }
					});
				}
			}, {
				text : "关闭",
				click : function() {
					$(':input','#editForm').each(function(){
						if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
							$(this).omTooltip('hide');
						}
					});
					dialogEdit.omDialog("close");// 关闭dialog
					grid.omGrid('reload');// 刷新表格数据
				}
			} ];
	dialogEdit.omDialog({
		width : 400,
		height : 250,
		autoOpen : false,
		modal : true,
		resizable : false,
		buttons : buttons,
		onClose : function(){
			$(':input','#editForm').each(function(){
				if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
					$(this).omTooltip('hide');
				}
			});
		}
	});
	// 显示dialog并初始化里面的输入框的数据
	showDialogEdit = function(title, rowData) {
		validatorEdit.resetForm();
		$('#editForm input').each(function(){
	    	$(this,showDialogEdit).val(rowData[this.name]);
		});
		dialogEdit.omDialog("option", "title", title);
		dialogEdit.omDialog("open");// 显示dialog
	};

};

function initGrid(){
	grid.omGrid(
			{
				limit: 0,
				singleSelect: true,
				height:250,
		        colModel : [
						{header : '元素名称', name : 'qualItem', align : 'center', width : '70', sort:'serverSide'},
						{header : '元素成分值', name : 'qualItemVal', align : 'center', width : '70', sort:'serverSide',
							renderer : function(value){
								return value ==''?'':value+'%';
							}	
						},]
		    });
}
search = function(){
	var group ={
			op : "and",
			rules : [{op : 'equal', field : 'qualityBatch', value : $('#qualityBatch').val(), type : 'string'}]
	};
	var extraData = {
			"domain" : "SmRmQualityElement",
			"rules" : JSON.stringify(group),
	};
	grid.omGrid({
		dataSource : searchUrl,
		extraData : extraData, 
		method:'POST'
	}, 'reload');
};
function getSubmitData(form)
{
	var info = {};
	$(':input',form).each(function(){
		if(typeof($(this).attr('id')) != "undefined" && typeof($(this).attr('name')) != "undefined"){
			info[$(this).attr('id')] = $(this).val();
		}
	});

	return JSON.stringify(info);
}
function initDialog(){
	initDialogAdd();
	initDialogDelete();
	initDialogEdit();
	validateAddInit();
	validateEditInit();
}

function validateAddInit()
{
	validatorAdd = $("#addForm").validate(
			{
				//编写验证规则
				rules: {
					qualItem: { required: true },
					qualItemVal: { required: true, number: true },
					},
				messages: {
					qualItem: { required: "" },
					qualItemVal: { required: "" },
					},
			});
	
	$('#qualItem-td','#addForm').omTooltip({
		  region : 'right',
       html : '不能为空！',
       anchor : true ,
       offset : [-5,45]
	});
	$('#qualItemVal','#addForm').omTooltip({region : 'right', html : '非空，必须为数字，长度不超4位！', anchor : true , offset : [-5,5]});
}
function validateEditInit()
{
	validatorEdit = $("#editForm").validate(
			{
				//编写验证规则
				rules: {
					qualItemVal: { required: true, number: true },
					},
				messages: {
					qualItemVal: { required: "" },
					},
			});
	$('#qualItemVal','#editForm').omTooltip({region : 'right', html : '非空，必须为数字，长度不超4位！', anchor : true , offset : [-5,5]});
	
}
</script>

</head>
<body>
	<div id="search-field">
	<table id="searchTable" class="mytable">
		<tr>
			<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">质检批号:</font></span></td>
			<td class="mytable-right"><span class="myinput"><input id="qualityBatch" name="qualityBatch" type="text" readonly="readonly"/></span></td>
			<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">物料编码:</font></span></td>
			<td class="mytable-right"><span class="myinput"><input id="materialId" name="materialId" type="text" readonly="readonly"/></span></td>
		</tr>
	</table>
	</div>
	<br>	
	<div id="maintool"></div>
	<table id="maingrid"></table>
	<div id="dialog-Add">	
		<form id="addForm">
		<table class="mytable">
			<tr>
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">质检批号:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualityBatch" name="qualityBatch" type="text" readonly="readonly"/></span></td>
			</tr>
			<tr>
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素名称:</font></span></td>
				<td id="qualItem-td" class="mytable-right"><span class="myinput"><input id="qualItem" name="qualItem" type="text" /></span></td>
			</tr>
			<tr>	
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素值:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualItemVal" name="qualItemVal" type="text" maxlength="4"/></span></td>
			</tr>
		</table>
		</form>	
	</div>
	<div id="dialog-Delete">
		<form id="deleteForm">
		<table class="mytable">
			<tr>
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">质检批号:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualityBatch" name="qualityBatch" type="text" readonly="readonly"/></span></td>
			</tr>
			<tr>	
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素名称:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualItem" name="qualItem" type="text" readonly="readonly"/></span></td>
			</tr>
			<tr>	
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素值:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualItemVal" name="qualItemVal" type="text" readonly="readonly"/></span></td>
			</tr>
		</table>
		<input id="id" name="id" type="hidden" />
		</form>
	</div>
	<div id="dialog-Edit">	
		<form id="editForm">
		<table class="mytable">
			<tr>
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">质检批号:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualityBatch" name="qualityBatch" type="text" readonly="readonly"/></span></td>
			</tr>
			<tr>	
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素名称:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualItem" name="qualItem" type="text" readonly="readonly"/></span></td>
			</tr>
			<tr>	
				<td class="mytable-left"><span><font face="微软雅黑" size="2px" color="darkblue">元素值:</font></span></td>
				<td class="mytable-right"><span class="myinput"><input id="qualItemVal" name="qualItemVal" type="text" maxlength="4"/></span></td>
			</tr>
		</table>
		<input id="id" name="id" type="hidden" />
		<input id="timeStamp" name="timeStamp" type="hidden" />
		</form>	
	</div>
</body>
</html>